<style scoped lang="less">
.songList {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  position: absolute;
  right: -500px;
  bottom: 65px;
  width: 500px;
  height: calc(100% - 105px);
  background: rgba(239, 238, 238, 0.81);
  opacity: 0;
  backdrop-filter: blur(10px);
  z-index: 1;
  transition: all ease-in-out .3s;

  &__title{
    font-weight: 500;
    font-size: 20px;
  }

  &__list{
    width: 100%;
    margin-top: 10px;
    height: calc(100% - 40px);
    &__item{
      margin: 4px 0;
      padding: 8px;
      border-radius: 10px;
      font-size: 12px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      &:nth-of-type(2n){ background: rgba(199, 195, 195, 0.54);}
      &:hover:not(.active){ background: rgba(198, 164, 164, 0.5);}
      &:hover:not(.active) > &__title{ color:white!important; }
      &:hover:not(.active) > &__sub-title{ color:white!important; }

      &__image{
        width: 40px;
        height: 40px;
        border-radius: 4px;
        margin-right: 10px;
      }

      &__title{
        width: 130px;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
        margin-right: 10px;
      }

      &__sub-title{
        width: 100px;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #8d8d8d;
        margin-right: 10px;
      }
    }
  }

}
.show{
  opacity: 1;
  right: 10px;
}
.active{
  & > .songList__list__item__title{ color: white; }
  & > .songList__list__item__sub-title{ color: white; }
  background: rgb(189, 3, 3) !important;
}
.w-60{
  width: 60px;
}
</style>
<template>
  <div class="songList" :class="{'show':showList}" ref="songListBoxRef">
    <div class="songList__title">当前播放列表</div>
    <div class="songList__list" ref="songListRef">
      <div ref="songListItemRef" class="songList__list__item" :class="{'active': ele.isPlaying }" v-for="(ele,index) of songList" @dblclick="netEasyMusicStore.setMusic(ele)">
        <img :src="ele.imageUrl" class="songList__list__item__image">
        <div class="songList__list__item__title">{{ ele.title }}</div>
        <div class="songList__list__item__sub-title">{{ ele.arts }}</div>
        <div class="songList__list__item__sub-title w-60">{{ ele.time }}</div>
        <div class="songList__list__item__sub-title">{{ ele.album }}</div>
      </div>
    </div>

  </div>
  <ScrollBar :el="songListRef" :yBarOptions="barOptions"></ScrollBar>
</template>

<script setup lang="ts">
// 资源
import netEasyMusicStore from '../../store'
import ScrollBar from '@/components/scrollBar'
import {computed, nextTick, ref, watch} from "vue";
import {formatDuring, getDomPosition} from "@/helper";
const songListRef = ref(null)
const songListBoxRef = ref(null)
const songListItemRef = ref(null)
const barOptions = ref({
  gap: 2,
  color:'rgba(114,104,104,0.6)',
  position:'right'
})
// 数据
const songList = computed(() => netEasyMusicStore.$state.playList?.map((ele:any) => ({
  ...ele,
  isPlaying: ele.id === netEasyMusicStore.$state.playing?.id,
  imageUrl: ele?.cover, // 歌曲图片
  title: ele?.name ?? '未知歌曲', // 歌曲名称
  arts: ele?.ar?.reduce((total:string,pre:any,index:number) => total+= index === 0 ? `${pre.name}` : `/${pre.name}`,'') ?? '未知歌手', // 歌手列表
  time: formatDuring((ele?.dt ?? 0) / 1000,'{m}:{s}'), // 时长
  album: ele?.al?.name ?? '未知专辑'
}))) // 显示数据

// 逻辑
const showList = computed(() => netEasyMusicStore.$state.showPlayList) // 显示播放列表
nextTick(() => {
  document.addEventListener('click', (event:MouseEvent) => {
    const { srcElement,path }  = event
    if((srcElement.classList?.[0] === 'player-box__sub-control__icon' || path.indexOf(songListBoxRef.value) !== -1)) return
    if(songListBoxRef.value !== srcElement) netEasyMusicStore.setShowPlayList(false)
  })
})
watch(showList,value => {
  if(value) {
    const { height } = getDomPosition(<any>songListItemRef.value?.[0]) ?? { height: 0}
    const findIndex = netEasyMusicStore.$state.playList.findIndex((ele:any) => ele?.id === netEasyMusicStore.$state.playing?.id)
    if(findIndex !== -1 && height && songListRef.value){
      songListRef.value?.scrollTo({top:findIndex * (height + 2),behavior:'smooth'})
    }
  }
})
// 交互

</script>

